<template>
<div  class="flexcol">
  <div style="flex:1;">
      <img :src="imgurl" v-show="imgurl" 
      style="width:100%;height:100%;"
       />

  </div>
  <div style="height: 50px;padding-top:10px;;">
      <lay-upload acceptMime="images" @done="done" @before="before" 
        auto 
        :multiple="multiple"
         :url="url" 
         :choose="choose"
         :field="field"
         :data="data"
         :headers="headers">
      </lay-upload>
  </div>
</div> 

</template>

<script lang="ts">
import { defineComponent,ref,watch  } from "vue";
import MyHttp from "../../library/MyHttp";   
import MyProcess from "../../library/MyProcess";
import MyWin from "../../library/MyWin";
import { useUserStore } from "../../store/user"; 
export default defineComponent({  
  props: {
    modelValue: {
      type: String,
    } 
  },  
   setup(prop:any, context:any) { 
        const imgurl=ref<any>(prop.modelValue);
        const url=ref(MyHttp.getBaseURL()+"/htfile/up");
        const before=( )=>{ 
            MyProcess.show(); 
        }
        const done=(r:any)=>{ 
            MyProcess.hide(); 
            var jo=JSON.parse(r.data); 
            if(jo.code!=0){
                MyWin.alert(jo.msg,{});
                return;
            } 
            context.emit("update:modelValue",jo.data.url);
            
        }
        
        watch(
              () => prop.modelValue,
                (newVal:any, oldVal:any) => {
                    imgurl.value=newVal;
                }
        )
        const field=ref("file");
        const multiple=ref(false);
        const choose=()=>{
           
        }
        const userInfoStore = useUserStore(); 
        const headers=ref<any>({
          token:userInfoStore.token
        })
        const data=ref<any>({

        })
           
        return{
            imgurl,
            url,
            before,
            done,
            field,
            choose,
            multiple,
            data,
            headers
        }
   }
});
</script>
<style scoped>
 
</style>
